<template>
	<view>
		<view class="header">
			<!-- <view class="bti">财富</view> -->
			<view class="ssuo" @tap="goSearch()">
				<image class="icon" src="../../static/images/ssuo.png" mode=""></image>
				<input class="input" type="text" value="" />
			</view>
			<image class="letter" src="../../static/images/dddddx.png" mode=""></image>
		</view>
		<view class="conter">
			<view class="content1">
				<view class="went">
					<view class="went1">总资产</view>
					<view class="went2">{{totalM}}元</view>
				</view>
				<view class="went mis">
					<view class="went1">最近收益</view>
					<view class="went2">{{earnings}}元</view>
				</view>
			</view>
			<view class="content2">
				<navigator :url="item.url" v-for="item in  LIb" :key="item._id">
					<view class="box">
						<image class="img" :src="item.img" mode=""></image>
						<view class="text">{{item.name}}</view>
					</view>
				</navigator>
			</view>
			<view class="content3">
				<view class="went1">
					行情
				</view>
				<view class="went2">
					<view class="msg">
						<view class="msg1">上证指数</view>
						<view class="msg2">3456.08</view>
						<view class="msg3">
							<view>+16.25</view>
							<view>+0.47%</view>
						</view>
					</view>
					<view class="msg">
						<view class="msg1">深证成指</view>
						<view class="msg2">1254.32</view>
						<view class="msg3">
							<view>+16.25</view>
							<view>+0.47%</view>
						</view>
					</view>
					<view class="msg">
						<view class="msg1">上证指数</view>
						<view class="msg2">2744.02</view>
						<view class="msg3">
							<view>+16.25</view>
							<view>+0.47%</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content4">
				<view class="went">
					<image class="img" src="../../static/images/caifu_hangqing_chunrifuli@3x.png" mode=""></image>
					<text class="text">春日福利，领取99元红包</text>
				</view>
				<view class="went">
					<image class="img" src="../../static/images/caifu_hangqing_meirilaichou@3x.png" mode=""></image>
					<text class="text">每日来抽50-500元好礼</text>
				</view>
			</view>
			<view class="content5">
				<view class="went1">
					定期理财
				</view>
				<view class="went2">
					<image class="img" src="../../static/images/icon_caifu_dingqilicai@3x.png" mode=""></image>
					<view class="tem">
						<view class="tem1">聚财京惠宝</view>
						<view class="tem2">预计年化收益率5.0%</view>
					</view>
					<button class="btn">去赚钱</button>
				</view>
				<view class="went2">
					<image class="img" src="../../static/images/icon_caifu_dingqilicai@3x(1).png" mode=""></image>
					<view class="tem">
						<view class="tem1">定期理财</view>
						<view class="tem2">历史年化收益率5.0%</view>
					</view>
					<button class="btn">去赚钱</button>
				</view>
				<view class="went2">
					<image class="img" src="../../static/images/icon_caifu_dingqilicai@3x(2).png" mode=""></image>
					<view class="tem">
						<view class="tem1">票据理财</view>
						<view class="tem2">预计年化收益率3.3%</view>
					</view>
					<button class="btn">去赚钱</button>
				</view>
				<view class="went2">
					<image class="img" src="../../static/images/icon_caifu_dingqilicai@3x(3).png" mode=""></image>
					<view class="tem">
						<view class="tem1">消费宝</view>
						<view class="tem2">预计年化收益率5.2%</view>
					</view>
					<button class="btn">去赚钱</button>
				</view>
				<view class="went2">
					<image class="img" src="../../static/images/icon_caifu_dingqilicai@3x(4).png" mode=""></image>
					<view class="tem">
						<view class="tem1">今日融</view>
						<view class="tem2">预计年化收益率4.7%</view>
					</view>
					<button class="btn">去赚钱</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('order')
	export default {
		data() {
			return {
				fund: {},
				gold: {},
				fixed: {},
				current: {},
				LIb: [{
						_id: 1,
						name: "活期",
						img: "../../static/images/icon_caifu_huoqi@3x.png",
						url: "../currentFinancial/currentFinancial"
					},
					{
						_id: 2,
						name: "定期",
						img: "../../static/images/icon_caifu_dingqi@3x.png",
						url: "/pagesC/regularIntervals/regularIntervals"
					},
					{
						_id: 3,
						name: "基金",
						img: "../../static/images/icon_caifu_jijin@3x.png",
						url: "/pagesA/fund/fund"
					},
					{
						_id: 4,
						name: "股票",
						img: "../../static/images/icon_caifu_gupiao@3x.png",
						url: "/pagesC/stock/stock"
					},
					{
						_id: 5,
						name: "黄金",
						img: "../../static/images/icon_caifu_huangjin@3x.png",
						url: "../gold/gold"
					},
					{
						_id: 6,
						name: "旗舰店",
						img: "../../static/images/icon_caifu_qijiandian@3x.png",
						url: ""
					}

				]
			}
		},
		computed: {
			//总资产
			totalM() {
				let datad = 0
				if (this.fund.totalAssets) {
					datad += this.fund.totalAssets
				}
				if (this.gold.totalAssets) {
					datad += this.gold.totalAssets
				}
				if (this.fixed.totalAssets) {
					datad += this.fixed.totalAssets
				}
				if (this.current.totalAssets) {
					datad += this.current.totalAssets
				}
				return datad
			},
			earnings(){
				let datad = 0
				if (this.fund.totalIncome) {
					datad += this.fund.totalIncome
				}
				if (this.gold.totalIncome) {
					datad += this.gold.totalIncome
				}
				if (this.fixed.totalIncome) {
					datad += this.fixed.totalIncome
				}
				if (this.current.totalIncome) {
					datad += this.current.totalIncome
				}
				return datad
			}
		},
		async onLoad() {
			if(uni.getStorageSync('userid')){
				this.fund = await this.holdType('fund')
				this.gold = await this.holdType('gold')
				this.fixed = await this.holdType('fixed')
				this.current = await this.holdType('current')
				console.log(this.fund, this.gold, this.fixed, this.current)
			}
		},
		methods: {
			...mapActions(['holdType']),
			goSearch() {
				console.log("s搜索")
				uni.navigateTo({
					url: "../../pagesD/search/search"
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}
</style>
<style lang="scss" scoped>
	.header {
		width: 750rpx;
		height: 110rpx;
		display: flex;
		// margin-bottom: 48rpx;
		align-items: center;
		justify-content: center;

		.bti {
			margin-left: 30rpx;
			font-size: 40rpx;
			color: #323232;
		}

		;

		.ssuo {
			width: 480rpx;
			display: flex;
			box-sizing: border-box;
			padding: 0 40rpx;
			margin: 0 20rpx;
			background-color: #F3F3F3;
			border-radius: 50rpx;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-top: 10rpx;
			}

			;

			.input {
				width: 300rpx;
				height: 60rpx;
			}
		}

		.letter {
			width: 50rpx;
			height: 44rpx;
			margin: 7rpx 30rpx 0 0;
		}
	}

	.conter {
		width: 750rpx;

		.content1 {
			width: 670rpx;
			height: 160rpx;
			margin: 0 auto;
			padding: 24rpx 104rpx 24rpx 24rpx;
			display: flex;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: #1778E6;

			.went {
				// width: 200rpx;
				height: 112rpx;
				color: #fff;

				.went1 {
					font-size: 32rpx;
				}

				;

				.went2 {
					font-size: 50rpx;
				}
			}
		}

		;

		.content2 {
			width: 670rpx;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			// box-sizing: border-box;
			margin-top: 40rpx;

			.box {
				width: 167.5rpx;
				height: 153rpx;
				// margin: 0 0 24rpx 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.img {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 16rpx;
				}

				;

				.text {
					width: 88rpx;
					font-size: 24rpx;
					color: #474747;
					text-align: center;
				}
			}

		}

		;

		.content3 {
			width: 750rpx;
			box-sizing: border-box;
			padding: 0 40rpx;
			margin-bottom: 24rpx;
			margin-top: 30rpx;

			.went1 {
				width: 64rpx;
				height: 44rpx;
				color: #323232;
				margin-bottom: 24rpx;
				font-size: 32rpx;
				font-weight: bold;
			}

			;

			.went2 {
				width: 670rpx;
				display: flex;
				-webkit-justify-content: space-between;
				justify-content: space-between;

				.msg {
					width: 150rpx;

					.msg1 {
						font-size: 32rpx;
						color: #323232;
						margin-bottom: 8rpx;
					}

					;

					.msg2 {
						color: #ff3a3a;
						font-size: 40rpx;
						margin-bottom: 16rpx;
					}

					;

					.msg3 {
						font-size: 20rpx;
						color: #fd7e7e;
						display: flex;
						-webkit-justify-content: space-between;
						justify-content: space-between;

					}
				}
			}

		}

		;

		.content4 {
			width: 670rpx;
			height: 44rpx;
			margin: 0 auto;
			margin-bottom: 48rpx;
			display: flex;
			padding: 5rpx 24rpx;
			box-sizing: border-box;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			background-color: #A8CEF8;
			border-radius: 44rpx;

			.went {
				width: 300rpx;
				height: 34rpx;

				.img {
					width: 28rpx;
					height: 28rpx;
				}

				;

				.text {
					color: #FFFFFF;
					margin-left: 16rpx;
					font-size: 24rpx;
				}
			}
		}

		;

		.content5 {
			width: 750rpx;
			box-sizing: border-box;

			.went1 {
				height: 44rpx;
				color: #323232;
				font-size: 32rpx;
				margin-bottom: 18rpx;
				font-weight: bold;
				padding: 0 40rpx;
			}

			;

			.went2 {
				width: 750rpx;
				height: 136rpx;
				border-top: 1px solid #E4E4E4;
				display: flex;
				align-items: center;
				padding: 0 40rpx;

				.img {
					width: 88rpx;
					height: 88rpx;
				}

				;

				.tem {
					width: 426rpx;
					height: 88rpx;
					margin-left: 16rpx;

					.tem1 {
						color: #323232;
						font-size: 32rpx;
					}

					;

					.tem2 {
						color: #7A7979;
						font-size: 24rpx;
					}
				}

				;

				.btn {
					width: 148rpx;
					height: 58rpx;
					line-height: 58rpx;
					padding: 0;
					margin: 0;
					color: #fff;
					font-size: 32rpx;
					border-radius: 58rpx;
					background-color: #3297E5;
				}
			}


		}
	}
</style>
